import { getViewportOffset } from "@/utils/dom"
import { CustomTableProps } from "../types"

export function useTableSize(props: ComputedRef<CustomTableProps>,TABLE_KEY: ComputedRef<string>) {
    const { full } = unref(props)
    const y = ref()


    const setUpTableSizeFull = () => {
        let Table = document.getElementById(unref(TABLE_KEY))
        let headerHeight = document.querySelector(`#${unref(TABLE_KEY)} #table-header`)?.clientHeight
        let tableTheadHeight = document.querySelector(`#${unref(TABLE_KEY)} .ant-table-thead`)?.clientHeight
        let footerHeight = document.querySelector(`#${unref(TABLE_KEY)} .ant-pagination`)?.clientHeight
        if(Table && headerHeight && footerHeight && tableTheadHeight) {
            // const {bottom} = getViewportOffset(Table)
            const bottom = Table.getBoundingClientRect().bottom - window.innerHeight
            console.log(bottom);
            
            let container_height = 0
            container_height = bottom >= 1 ? Table.clientHeight + bottom : Table.clientHeight - bottom
            y.value = container_height - headerHeight - footerHeight - tableTheadHeight - 32
        }
    }

    const scrollConfig = computed(() => {
        return {
            scrollToFirstRowOnChange: true,
            x: '100%',
            y: unref(y) + 'px'
        }
    })

    nextTick(() => {
        if(full) {
            setTimeout(() => {
                setUpTableSizeFull()
            },5000)
        }
    })  

    return {
        scrollConfig
    }
}